/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("type-ahead") {
    #{generate-class-name($titon-type-ahead)} {
        @extend %placeholder-position-absolute;
        z-index: map-get($titon-settings-zindex, "type-ahead");
        opacity: 0;
        visibility: hidden;
        transition: all map-get($titon-type-ahead, "transition");
        background: #fff;
        width: 15rem;

        // Fixes issues where menu does not display in iOS
        // Kind of hacky? Other solutions?
        -webkit-backface-visibility: hidden;

        ul {
            @extend %placeholder-list;
        }

        a {
            padding: theme-setting("medium-padding");
            display: block;
        }
    }

    #{generate-class-name($titon-type-ahead, "heading")} {
        padding: theme-setting("medium-padding");
        display: block;
    }

    #{generate-class-name($titon-type-ahead, "highlight")} {
        background: #fff;
        padding: 0;
    }

    #{generate-class-name($titon-type-ahead, "description")} {
        display: block;
        font-size: theme-setting("small-font-size");
    }

    #{generate-class-name($titon-type-ahead, "shadow")} {
        position: relative;

        .is-shadow {
            color: gray;
            z-index: 1;
        }

        .not-shadow {
            @extend %placeholder-position-absolute;
            background: transparent;
            z-index: 2;
        }
    }
}
